<template>
  <div id="personal">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>个人通讯录</el-breadcrumb-item>
      <el-breadcrumb-item>全部</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row type="flex" class="row-bg">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <div id="list">
            个人通讯录
            <i class="el-icon-circle-plus-outline" id="font" @click="addgroupbtn"></i>

            <el-menu default-active="999" class="el-menu-vertical-demo" background-color="#ffffff" text-color="#000" active-text-color="#ffd04b">
              <el-menu-item index="999">
                <span slot="title" @click="chooseGroup($event)">全部({{ sum }})</span>
              </el-menu-item>

              <el-menu-item :index="v.group_number" v-for="(v, i) in total_data" :key="i">
                <span slot="title" @click="chooseGroup($event)">{{ total_data[i].group_name }}({{ total_data[i].num }})</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple-light">
          <div id="listbox">
            <el-row>
              <el-button type="primary" @click="addbtn">新增</el-button>
              <!-- <el-button type="primary">外部邮件</el-button> -->
              <!-- <el-button type="primary">短信</el-button> -->
              <el-button type="primary" @click="delbtn">删除</el-button>
              <!-- <el-button type="primary">导入</el-button> -->
              <el-button type="primary" v-if="isShow" @click="movepersonbtn">移动到</el-button>

              <SearchInput />
            </el-row>
          </div>
          <!-- 新增个人通讯录的弹框 -->
          <div>
            <el-dialog title="新增通讯录" :visible.sync="visible">
              <el-form :model="form">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱" :label-width="formLabelWidth">
                  <el-input v-model="form.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidth">
                  <el-input v-model="form.tele" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="办公电话" :label-width="formLabelWidth">
                  <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="公司" :label-width="formLabelWidth">
                  <el-input v-model="form.company" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="所在分组" :label-width="formLabelWidth">
                  <el-select v-model="form.group" placeholder="请选择分组" @change="currentSel">
                    <el-option v-for="(v, i) in total_data" :key="i" :label="v.group_name" :value="v.group_id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="closedialog">取 消</el-button>
                <el-button type="primary" @click="addperson">确 定</el-button>
              </div>
            </el-dialog>
          </div>
          <!-- 新增分组的弹框 -->
          <div>
            <el-dialog title="新增分组" :visible.sync="visible_1">
              <el-form :model="form1">
                <el-form-item label="分组名称" :label-width="formLabelWidth">
                  <el-input v-model="form1.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分组编号(数字)" :label-width="formLabelWidth">
                  <el-input v-model="form1.region" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="closedialog">取 消</el-button>
                <el-button type="primary" @click="addgroup">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
        <!-- 删除分组的弹框 -->
        <div>
          <el-dialog title="系统提示" :visible.sync="visible_2" width="30%">
            <span>确定要删除吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="closedialog">取 消</el-button>
              <el-button type="primary" @click="delperson">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <!-- 移动的弹框 -->
        <div>
          <el-dialog title="请选择移入的分组名称" :visible.sync="visible_3" width="30%">
            <el-form :model="form">
              <el-form-item label="所在分组" :label-width="formLabelWidth">
                <el-select v-model="form.group" placeholder="请选择分组" @change="currentSel">
                  <el-option v-for="(v, i) in total_data" :key="i" :label="v.group_name" :value="v.group_id">
                  </el-option>
                </el-select>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="closedialog">取 消</el-button>
              <el-button type="primary" @click="moveperson ">确 定</el-button>
            </div>
          </el-dialog>
        </div>

        <Letterlist />
        <div id="table">
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @select="chooseCheckbox" @select-all="chooseCheckbox">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="name" label="姓名" width="160">
            </el-table-column>
            <el-table-column prop="Email" label="电子邮箱" width="160">
            </el-table-column>
            <el-table-column prop="tele" label="手机号码" width="160">
            </el-table-column>
            <el-table-column prop="phone" label="办公电话" width="160">
            </el-table-column>
            <el-table-column prop="company" label="公司" width="160">
            </el-table-column>
            <el-table-column prop="group_name" label="所在分组" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>

        <div>
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-sizes="[5, 10, 20, 30]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="this.total">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Letterlist from "../components/Letterlist.vue";
import SearchInput from "../components/SearchInput.vue";
export default {
  components: {
    Letterlist,
    SearchInput,
  },
  data() {
    return {
      isShow: false,
      currentPage1: 1,
      count: 10,
      tableData: [
        {
          address_id: 0,
          name: "",
          Email: "",
          tele: "",
          phone: "",
          company: "",
          group: "",
          group_id: "",
          group_name: "",
        },
      ],
      total: 0,
      delarr: [],
      delarrNumber: [],

      visible: false,
      visible_1: false,
      visible_2: false,
      visible_3: false,
      checkGroup: "",

      form: {
        name: "",
        email: "",
        tele: "",
        phone: "",
        company: "",
        group: "",
      },
      form1: {
        name: "",
        region: "",
      },
      formLabelWidth: "120px",
      group: [{ group_id: "", group_name: "" }], //分组数据
      total_data: [{ group_name: "", num: 0, group_id: 0 }], //数据库分组数据统计
      sum: 0,
    };
  },

  methods: {
    //获取下拉选项的值
    currentSel(selVal) {
      this.form.group = selVal;
    },

    //点击增加按钮
    addbtn() {
      this.visible = !this.visible;
    },
    handleSizeChange(val) {
      this.count = val;
      this.getpersonal();
    },
    handleCurrentChange(val) {
      this.currentPage1 = val;
      this.getpersonal();
    },
    // 获取个人通讯录表
    getpersonal() {

      this.$axios({
        url: "/addressbook/personal/get",
        params: {
          count: this.count,
          page: this.currentPage1,
          input2: this.input2,
          selected: this.selected,
          selected1: this.selected1,
          alphabet: this.alphabet,
          checkGroup: this.checkGroup,
        },
      }).then((res) => {
        this.tableData = res.data.searchDate;
        this.total = res.data.total;
        this.total_data = res.data.data;
        // this.originData = res.data.originData;
      });
    },
    // 有数据选中时可以点击删除框和移动框
    chooseCheckbox(selection, row) {
      if (selection.length) {
        this.isShow = true
        this.delarr = selection;

      }
      else { this.isShow = false }
    },
    //关闭对话框
    closedialog() {
      this.visible = false;
      this.visible_1 = false;
      this.visible_2 = false;
      this.visible_3 = false;
    },
    //添加通讯录数据
    addperson() {
      this.visible = false;
      this.$axios({
        url: "/addressbook/personal/add",
        method: "post",
        data: {
          name: this.form.name,
          email: this.form.email,
          tele: this.form.tele,
          phone: this.form.phone,
          company: this.form.company,
          group: this.form.group,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          // 需要更新数据
          this.getpersonal();

          this.form.name = "";
          this.form.email = "";
          this.form.tele = "";
          this.form.phone = "";
          this.form.company = "";
          this.form.group = "";
          this.$message({
            message: "添加成功",
            type: "success",
          });

        }
      });
    },
    // 点击删除按钮
    delbtn() {
      if (this.delarr.length) {
        this.visible_2 = !this.visible_2;
        for (let i = 0; i < this.delarr.length; i++) {
          this.delarrNumber.push(this.delarr[i].address_id);
        }
      } else {
        alert("未选中数据");
      }
    },
    // 删除个人通讯录数据
    delperson() {
      this.visible_2 = false;

      this.$axios({
        url: "/addressbook/personal/del",
        method: "post",
        data: {
          arr: this.delarrNumber,
        },
      }).then((res) => {
        this.getpersonal()
        this.delarrNumber = [];
        if (res.data.code == 200) {
          this.$message({
            message: '删除成功',
            type: "success",
          });

        }
      });
    },
    // 点击移动按钮
    movepersonbtn() {
      this.visible_3 = true
    },
    // 移动分组
    moveperson() {
      this.visible_3 = false
      for (let i = 0; i < this.delarr.length; i++) {
        this.delarrNumber.push(this.delarr[i].address_id);
      }
      this.$axios({
        url: "/addressbook/personal/move",
        method: "post",
        data: {
          arr: this.delarrNumber,
          group: this.form.group,

        },
      }).then((res) => {
        this.getpersonal()
        this.delarrNumber = [];
        this.form.group = "";
        this.isShow = false
        this.$message({
          message: res.data,
          type: "success",

        });
      });

    },

    //点击icon按钮
    addgroupbtn() {
      this.visible_1 = !this.visible_1;
    },
    //  点击icon添加分组
    addgroup() {
      this.visible_1 = false;
      this.$axios({
        url: "/addressbook/personal/group/add",
        method: "post",
        data: {
          name: this.form1.name,
          number: this.form1.region,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          // 需要更新数据
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getpersonal();
          this.form1.name = "";
          this.form1.region = "";
        }
      });
    },

    // 总数据
    sumFn() {
      this.sum = 0;
      for (let i = 0; i < this.total_data.length; i++) {
        this.sum += this.total_data[i].num;
      }
    },
    // 侧边查询
    chooseGroup(e) {
      let str = e.currentTarget.innerHTML
      let str1 = str.split('(')[0]
      if (str1 == '全部') {
        this.checkGroup = ''
      } else { this.checkGroup = str1 }
      this.currentPage1 = 1
      this.getpersonal()
    }
  },

  computed: {
    input2: function () {
      return this.$store.state.Addressbook.input2;
    },
    selected: function () {
      return this.$store.state.Addressbook.selected;
    },
    selected1: function () {
      return this.$store.state.Addressbook.selected1;
    },
    alphabet: function () {
      return this.$store.state.Addressbook.alphabet;
    },
    datanum: function () {
      return this.$store.state.Addressbook.group;
    },
  },

  created() {
    this.getpersonal();

    this.sumFn();
  },
  watch: {
    input2: function () {
      this.currentPage1 = 1;
      this.getpersonal();
    },
    selected: function () {
      this.currentPage1 = 1;
      this.getpersonal();
    },
    alphabet: function () {
      this.currentPage1 = 1;
      this.getpersonal();
    },
    total_data: function () {
      this.sumFn();


    },

  },
};
</script>

<style scoped>
span[data-v-7a232245] {
  display: inline-block;
  height: 100%;
  width: 120px;
}
.block {
  position: absolute;
  right: 0;
  margin-top: 10px;
}
#personal {
  height: 100%;
  text-align: left;
  line-height: 16px;
}
.el-breadcrumb {
  height: 7%;
}
.row-bg {
  background-color: white;
  height: 93%;
}
#font {
  padding-left: 20px;
}
.el-col-4 {
  border: 1px solid #f2f2f2;
}
.el-col-20 {
  text-align: left;
}
#list,
#listbox,
#select {
  margin: 20px 0 0 20px;
  font-size: 16px;
  line-height: 16px;

  text-align: left;
}

.el-menu-vertical-demo {
  margin-top: 10px;
}
</style>
